<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <div class="mb30 flexbet">
                    <div>
                        <p class="topfont">设备管理</p>
                        <p>管理深基坑相关监测设备，查看设备状态和数据</p>
                    </div>
                    <div class="bluebtn flexrow cent" @click="drawer = true">
                        <img
                            class="img15"
                            src="../../../static/pit/add.png"
                        /><span>新增设备</span>
                    </div>
                </div>
                <el-card class="mb30">
                    <div class="flexbet top">
                        <div class="flexrow">
                            <div class="flexcol">
                                <span class="f14">设备类型</span>
                                <el-select v-model="type" placeholder="请选择">
                                    <el-option
                                        v-for="item in topOpt1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flexcol">
                                <span class="f14">设备状态</span>
                                <el-select v-model="area" placeholder="请选择">
                                    <el-option
                                        v-for="item in topOpt2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flexcol">
                                <span class="f14">安装位置</span>
                                <el-select
                                    v-model="period"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in topOpt3"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="flexcol">
                            <span class="f14 mb10">搜索设备</span>
                            <el-input
                                placeholder="设备编号/名称"
                                v-model="keyword"
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-search"
                                ></i>
                            </el-input>
                        </div>
                    </div>
                </el-card>
                <div class="monitorList">
                    <el-card
                        class="boxcard"
                        v-for="(item, index) in monitorList"
                        :key="index"
                    >
                        <div class="flexbet mid">
                            <div class="flexcol">
                                <span class="f14 fcp">{{ item.name }}</span>
                                <span class="bigfont">{{ item.data }}</span>
                                <div v-if="index == 0" class="flexrow cent">
                                    <img src="../../../static/pit/up.png" />
                                    <div class="flexcol f12 green">
                                        <span>较上月增长</span>
                                        <span>{{ item.changeData }}台</span>
                                    </div>
                                </div>
                                <div v-if="index == 1" class="flexrow cent">
                                    <img src="../../../static/pit/up.png" />
                                    <span class="f12 green"
                                        >在线率 {{ item.changeData }}%</span
                                    >
                                </div>
                                <div v-if="index == 2" class="flexrow cent">
                                    <img
                                        class="img15"
                                        src="../../../static/pit/status1.png"
                                    />
                                    <span class="f12 yellow"> 需要处理</span>
                                </div>
                                <div v-if="index == 3" class="flexrow cent">
                                    <img
                                        class="img15"
                                        src="../../../static/pit/li.png"
                                    />
                                    <span class="f12 red"
                                        >超期 {{ item.changeData }} 台</span
                                    >
                                </div>
                            </div>
                            <div class="iconbox" :class="'iconbg' + index">
                                <img
                                    :src="item.iconUrl"
                                    :class="index == 0 ? '' : 'img20'"
                                />
                            </div>
                        </div>
                    </el-card>
                </div>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="17">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">设备类型分布</span>
                                <el-select
                                    v-model="period2"
                                    class="select5"
                                    size="small"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in topOpt4"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div
                                id="statusTrend"
                                style="width: 100%; height: 260px"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">设备状态统计</span>
                                <el-select
                                    class="select5"
                                    size="small"
                                    v-model="period3"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in topOpt5"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>

                            <div
                                id="pointTrend"
                                style="
                                    width: 100%;
                                    height: 260px;
                                    margin: 0 auto;
                                "
                            ></div>
                        </div>
                    </el-col>
                </el-row>
                <div class="item card tablebox sw">
                    <el-table
                        class="table"
                        :data="tableData"
                        style="width: 100%"
                    >
                        <el-table-column prop="id" label="设备编号" width="90">
                        </el-table-column>
                        <el-table-column prop="name" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="type" label="设备类型">
                        </el-table-column>
                        <el-table-column prop="location" label="安装位置">
                        </el-table-column>
                        <el-table-column
                            prop="time"
                            label="安装时间"
                            width="160"
                        >
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <span
                                    class="tabletag"
                                    :class="'tabletag' + scope.row.status"
                                    effect="dark"
                                    >{{ scope.row.statusName }}</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <span
                                    class="blue mr20"
                                    @click="detailmodal = true"
                                    >查看</span
                                >
                                <span class="mr20">编辑</span>
                                <span class="red">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="flexbet bot">
                        <span>显示 1 到 6 条，共 246 条记录</span>
                        <el-pagination
                            background
                            :pager-count="4"
                            layout="prev, pager, next"
                            :total="405"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
            <el-drawer
                title="新增设备"
                :visible.sync="drawer"
                :direction="rtl"
                :before-close="handleClose"
                class="drawer"
            >
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    label-position="top"
                    ref="ruleForm"
                    label-width="100px"
                    class="ruleForm"
                >
                    <el-form-item label="设备编号" prop="id">
                        <el-input
                            v-model="ruleForm.id"
                            placeholder="请输入设备编号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称" prop="name">
                        <el-input
                            v-model="ruleForm.name"
                            placeholder="请输入设备名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型" prop="type">
                        <el-select
                            v-model="ruleForm.type"
                            placeholder="请选择设备类型"
                        >
                            <el-option
                                v-for="item in topOpt1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="安装位置" prop="location">
                        <el-select
                            v-model="ruleForm.location"
                            placeholder="请选择安装位置"
                        >
                            <el-option
                                v-for="item in topOpt3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细位置描述" prop="addressdesc">
                        <el-input
                            type="textarea"
                            v-model="ruleForm.addressdesc"
                            placeholder="请输入详细位置描述"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="生产厂家" prop="factury">
                        <el-input
                            v-model="ruleForm.factury"
                            placeholder="请输入生产厂家"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="型号规格" prop="model">
                        <el-input
                            v-model="ruleForm.model"
                            placeholder="请输入型号规格"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="安装时间" prop="date" required>
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="ruleForm.date"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="设备状态" prop="status">
                        <el-select
                            v-model="ruleForm.status"
                            placeholder="请选择设备状态"
                        >
                            <el-option
                                v-for="item in topOpt2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注信息" prop="remark">
                        <el-input
                            type="textarea"
                            v-model="ruleForm.remark"
                            placeholder="请输入备注信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="fr">
                        <el-button @click="resetForm('ruleForm')"
                            >取消</el-button
                        >
                        <el-button
                            type="primary"
                            class="bluebtn"
                            @click="submitForm('ruleForm')"
                            >保存</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-drawer>
            <!-- 项目详情弹窗 -->
            <Modal
                v-model="detailmodal"
                width="1000px"
                :mask-closable="false"
                title="设备详情 - 位移传感器01"
            >
                <div class="detail" v-if="!isAdd">
                    <div class="tags">
                        <div class="tags_title">
                            <h2>基本信息</h2>
                            <el-button type="primary"> 编辑 </el-button>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>设备编号:</span>
                                <span>S001</span>
                            </div>
                            <div class="item1">
                                <span>设备名称:</span>
                                <span>位移传感器-01</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>设备类型:</span>
                                <span> 位移传感器</span>
                            </div>
                            <div class="item1">
                                <span>生产厂家:</span>
                                <span>XX科技有限公司</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>型号规格: </span>
                                <span> DWQ-2000</span>
                            </div>
                            <div class="item1">
                                <span>安装位置:</span>
                                <span>东侧边坡-1号点</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>安装时间:</span>
                                <span>2025-05-12</span>
                            </div>
                            <div class="item1">
                                <span>设备状态:</span>
                                <span>正常运行</span>
                            </div>
                        </div>
                    </div>
                    <div class="tags">
                        <h2>技术参数</h2>
                        <div class="list">
                            <div class="item1">
                                <span>测量范围:</span>
                                <span>±50mm</span>
                            </div>
                            <div class="item1">
                                <span>精度等级:</span>
                                <span>0.01mm</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>采样频率:</span>
                                <span>1次/10分钟</span>
                            </div>
                            <div class="item1">
                                <span>数据传输方式:</span>
                                <span> 4G无线传输</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>供电方式:</span>
                                <span>太阳能+锂电池</span>
                            </div>
                            <div class="item1">
                                <span>电池寿命:</span>
                                <span>2-3年</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>防护等级:</span>
                                <span>IP68</span>
                            </div>
                        </div>
                    </div>
                    <div class="tags">
                        <h2>最近监测数据</h2>
                    </div>
                </div>
                <div slot="footer">
                    <el-button
                        size="small"
                        plain
                        type="info"
                        @click="detailmodal = false"
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        plain
                        v-preventReClick="1500"
                        @click="detailmodal = false"
                        >保存</el-button
                    >
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            drawer: false,
            color: ["#165dff", "#ff7d00", "#3dd4a7", "#86909c"],
            keyword: "",
            topList: [
                {
                    name: "监测点数量",
                    val: 48,
                },
                {
                    name: "预警次数",
                    val: 7,
                },
                {
                    name: "数据更新",
                    val: "1分钟前",
                },
                {
                    name: "项目状态",
                    val: "正常",
                },
            ],
            topOpt1: [
                {
                    value: 1,
                    label: "全部",
                },
                {
                    value: 2,
                    label: "位移传感器",
                },
                {
                    value: 3,
                    label: "倾斜传感器",
                },
                {
                    value: 4,
                    label: "应力传感器",
                },
                {
                    value: 5,
                    label: "地下水位传感器",
                },
                {
                    value: 6,
                    label: "孔隙水压力计",
                },
                {
                    value: 7,
                    label: "土压力计",
                },
            ],
            type: 1,
            topOpt2: [
                {
                    value: 1,
                    label: "全部",
                },
                {
                    value: 2,
                    label: "正常运行",
                },
                {
                    value: 3,
                    label: "异常运行",
                },
                {
                    value: 4,
                    label: "离线",
                },
                {
                    value: 5,
                    label: "维护中",
                },
            ],
            area: 1,
            topOpt3: [
                {
                    value: 1,
                    label: "全部",
                },
                {
                    value: 2,
                    label: "东侧边坡",
                },
                {
                    value: 3,
                    label: "西侧边坡",
                },
                {
                    value: 4,
                    label: "南侧边坡",
                },
                {
                    value: 5,
                    label: "北侧边坡",
                },
                {
                    value: 6,
                    label: "基坑底部",
                },
            ],
            period: 1,
            topOpt4: [
                {
                    value: 1,
                    label: "本月",
                },
                {
                    value: 2,
                    label: "上月",
                },
                {
                    value: 3,
                    label: "本季度",
                },
                {
                    value: 4,
                    label: "本年",
                },
            ],
            period2: 1,
            topOpt5: [
                {
                    value: 1,
                    label: "实时",
                },
                {
                    value: 2,
                    label: "今日",
                },
                {
                    value: 3,
                    label: "本周",
                },
                {
                    value: 4,
                    label: "本月",
                },
            ],
            period3: 1,
            monitorList: [
                {
                    name: "设备总数",
                    data: 246,
                    changeStatus: 1,
                    changeData: 12,
                    unit: "台",
                    desc: "较上月",
                    iconUrl: "../../../static/pit/table2.png",
                },
                {
                    name: "在线设备",
                    data: 218,
                    changeStatus: 1,
                    changeData: 88.6,
                    unit: "%",
                    desc: "在线率",
                    iconUrl: "../../../static/pit/yes2.png",
                },
                {
                    name: "异常设备",
                    data: 12,
                    changeStatus: 0,
                    changeData: 0,
                    unit: "",
                    desc: "需要处理",
                    iconUrl: "../../../static/pit/warn4.png",
                },
                {
                    name: "待维护设备",
                    data: 16,
                    changeStatus: 0,
                    changeData: 3,
                    unit: "台",
                    desc: "超期",
                    iconUrl: "../../../static/pit/set6.png",
                },
            ],
            imgList: [
                "../../../static/pit/set5.png",
                "../../../static/pit/set5.png",
                "../../../static/pit/set5.png",
                "../../../static/pit/set5.png",
            ],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "近7天",
                },
                {
                    value: 2,
                    label: "近30天",
                },
                {
                    value: 3,
                    label: "近90天",
                },
            ],
            waterPeriod: 1,
            msgList: [
                {
                    status: 1, ////0正常 1预警
                    title: "西区沉降监测点JC-002超过预警值",
                    desc: "当前沉降量26.8mm，超过预警值25mm（预警阈值：25-30mm）",
                    time: "2023-06-15 09:45",
                    type: 1, //0已处理 1处理中
                },
                {
                    status: 1,
                    title: "南区支撑轴力监测点JC-015波动异常",
                    desc: "1小时内支撑轴力波动值超过15%（正常范围：±10%）",
                    time: "2023-06-15 09:45",
                    type: 0,
                },
                {
                    status: 0,
                    title: "监测设备JC-023信号中断",
                    desc: "东区水平位移监测点JC-023设备信号中断，正在排查原因",
                    time: "2025-05-12 10:20",
                    type: 1,
                },
            ],

            tableData: [
                {
                    id: "S001",
                    location: "东侧边坡-1号点",
                    name: "位移传感器-01",
                    type: "位移传感器",
                    time: "2025-05-12",
                    status: 0, //0正常 1异常 2维护中 3离线
                    statusName: "正常运行",
                },
                {
                    id: "S002",
                    location: "东侧边坡-2号点",
                    name: "位移传感器-02",
                    type: "位移传感器",
                    time: "2025-05-12",
                    status: 0,
                    statusName: "正常运行",
                },
                {
                    id: "T001",
                    location: "西侧边坡-1号点",
                    name: "倾斜传感器-01",
                    type: "倾斜传感器",
                    time: "2025-05-15",
                    status: 1,
                    statusName: "异常运行",
                },
                {
                    id: "P001",
                    location: "南侧边坡-1号点",
                    name: "土压力计-01",
                    type: "土压力计",
                    time: "2025-05-18",
                    status: 0,
                    statusName: "正常运行",
                },
                {
                    id: "W001",
                    location: "基坑底部-1号点",
                    name: "地下水位传感器-01",
                    type: "地下水位传感器",
                    time: "2025-05-20",
                    status: 3,
                    statusName: "离线",
                },
                {
                    id: "S003",
                    location: "北侧边坡-1号点",
                    name: "位移传感器-03",
                    type: "位移传感器",
                    time: "2025-05-22",
                    status: 2,
                    statusName: "维护中",
                },
            ],
            ruleForm: {
                id: "",
                name: "",
                type: "",
                location: "",
                addressdesc: "",
                factury: "",
                model: "",
                date: "",
                status: "",
                remark: "",
            },
            rules: {
                id: [
                    {
                        required: true,
                        message: "请输入设备编号",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入设备名称",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10个字符",
                        trigger: "blur",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "请选择设备类型",
                        trigger: "change",
                    },
                ],
                location: [
                    {
                        required: true,
                        message: "请选择安装位置",
                        trigger: "change",
                    },
                ],
                date: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
                status: [
                    {
                        required: true,
                        message: "请选择设备状态",
                        trigger: "change",
                    },
                ],
            },
            detailmodal: false,
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.totalList = [
            {
                name: "监测点总数",
                realTimeData: 128,
                unit: "",
                changeStatus: 1, //0降低 1增长
                changeData: 5.2,
                iconUrl: "../../static/pit/location.png",
            },
            {
                name: "报警总数",
                realTimeData: 23,
                unit: "",
                changeStatus: 0, //0降低 1增长
                changeData: 12.3,
                iconUrl: "../../static/pit/warn.png",
            },
            {
                name: "设备在线率",
                realTimeData: 96.8,
                unit: "%",
                changeStatus: 1, //0降低 1增长
                changeData: 2.1,
                iconUrl: "../../static/pit/wifi.png",
            },
            {
                name: "数据采集量",
                realTimeData: 12.5,
                unit: "K",
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/data.png",
            },
        ];

        this.pointTrendFn();
        this.statusFn();
    },
    methods: {
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#36D399", "#FFA44C", "#AAB1B9", "#F87878"],
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    bottom: "0%",
                    left: "center",
                    itemWidth: 35,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { name: "正常运行" },
                        { name: "异常运行" },
                        { name: "离线" },
                        { name: "维护中" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["50%", "80%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 218, name: "正常运行" },
                            { value: 12, name: "异常运行" },
                            { value: 16, name: "离线" },
                            { value: 0, name: "维护中" },
                        ],
                    },
                ],
            });
        },
        statusFn() {
            let statusTrend = this.$echarts.init(
                document.getElementById("statusTrend")
            );
            statusTrend.setOption({
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "{b0}</br>设备数量 : {c0}",
                },
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "3%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    axisLabel: {
                        rotate: 15,
                        interval: 0,
                        margin: 15, // 调整标签与刻度线之间的距离
                    },
                    data: [
                        "位移传感器",
                        "倾斜传感器",
                        "应力传感器",
                        "地下水位传感器",
                        "孔隙水压力计",
                        "土压力计",
                    ],
                },
                yAxis: {
                    type: "value",
                    max: 90,
                    splitNumber: 10,
                },
                series: [
                    {
                        data: [
                            {
                                value: 86,
                                itemStyle: {
                                    color: "#5B8DFF",
                                },
                            },
                            {
                                value: 42,
                                itemStyle: {
                                    color: "#53D3D0",
                                },
                            },
                            {
                                value: 32,
                                itemStyle: {
                                    color: "#FFA44C",
                                },
                            },
                            {
                                value: 28,
                                itemStyle: {
                                    color: "#F87878",
                                },
                            },
                            {
                                value: 24,
                                itemStyle: {
                                    color: "#4CCA69",
                                },
                            },
                            {
                                value: 34,
                                itemStyle: {
                                    color: "#AAB1BA",
                                },
                            },
                        ],
                        type: "bar",
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.drawer = false;
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.fcp {
    color: #7a7b7c;
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.cent {
    align-items: center;
}
.f14 {
    font-size: 14px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.bold {
    font-weight: 800;
}
.mb30 {
    margin-bottom: 30px;
}
.mt10 {
    display: inline-block;
    margin-top: 10px;
}
.mr20 {
    margin-right: 20px;
}

.pad20 {
    padding: 20px;
}
.top {
    align-items: center;
    .subtit {
        color: #7a7b7c;
        margin-top: 5px;
        i {
            margin-right: 5px;
        }
    }
    .right {
        li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px 15px;
            background: #f2f3f5;
            margin-left: 20px;
            border-radius: 10px;
            color: #7a7b7c;
            .f18 {
                font-weight: 800;
                margin-top: 5px;
            }
            .font0 {
                color: #165dff;
            }
            .font1 {
                color: #ff7d00;
            }
            .font2,
            .font3 {
                color: #00b42a;
            }
        }
    }
    .el-select {
        margin-top: 10px;
        width: 150px;
        padding-right: 10px;
    }
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;

    .boxcard {
        width: 24%;
        //color: #7a7b7c;
        border-radius: 15px;
        position: relative;
        transition-duration: 0.3s;
        transition-property: transform;
        .tit {
            align-items: center;
            .tag {
                border-radius: 30px;
                width: 50px;
                text-align: center;
                font-size: 14px;
                padding: 3px 0;
            }
            .tag0 {
                color: #165dff;
                background: #e7eeff;
            }
            .tag1 {
                color: #ff7d00;
                background: #fff2e5;
            }
            .tag2 {
                color: #3dd4a7;
                background: #e7f9f9;
            }
            .tag3 {
                color: #86909c;
                background: #f3f4f5;
            }
        }
        .mid {
            align-items: center;
            // padding: 20px 0;
            // border-bottom: 1px solid #f2f6fc;
            .iconbox {
                width: 50px;
                height: 60px;
                border-radius: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .totalicon {
                    width: 20px;
                    height: 20px;
                }
            }
            .iconbg0 {
                background: #e7eeff;
            }
            .iconbg1 {
                background: #e7f9f9;
            }
            .iconbg2 {
                background: #fff2e5;
            }
            .iconbg3 {
                background: #feebeb;
            }
        }

        .bigfont {
            font-size: 30px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
    .boxcard:hover {
        cursor: pointer;
        transform: translateY(-5px);
    }
    .img15 {
        margin-right: 5px;
    }
}

.map {
    .imgbox {
        width: 100%;
        height: 300px;
        border-radius: 10px;
        .bg {
            width: 100%;
            height: 300px;
            border-radius: 10px;
        }
    }
}

.item {
    padding: 20px;
}
.title {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    align-items: center;
    .bold {
        color: #000;
        font-size: 20px;
    }
    .rightfont {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
.msgbox {
    height: 340px;
    li {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;

        font-size: 14px;
        .iconbox {
            width: 30px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 10px;
        }
        .lefticon {
            width: 20px;
        }
        .black {
            display: inline-block;
        }

        .tag {
            padding: 5px 15px;
            background: #f3f4f6;
            font-size: 12px;
            margin-right: 20px;
            border-radius: 15px;
        }
        .tag0 {
            background: #dcfce7 !important;
        }
        .tag1 {
            background: #fef9c3 !important;
        }
        .tip0 {
            color: #86909c;
        }
        .tip1 {
            color: #ff7d00;
            background: #ffecd9 !important;
        }
    }
    .msg1 {
        border-left: 4px solid #ff7d00;
        background: #fff8f2;
    }
    .msg0 {
        border-left: 4px solid #86909c;
        background: #f9f9fa;
    }
}

.btntag {
    display: inline-block;
    // padding: 3px 12px;
    // background: #f2f3f5;
    color: #999;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.active0 {
    // background: #e7eeff !important;
    color: #2762ef !important;
}

.black {
    color: #000;
}
.red {
    color: #f53f3f;
}
.green {
    color: #00b42a;
}
.blue {
    color: #2762ef;
}
.yellow {
    color: #ff7d00;
}
.greenbg {
    background: #00b42a;
}
.yellowbg {
    background: #ff7d00;
}
.redbg {
    background: #f53f3f;
}
.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    font-size: 12px;
    border-radius: 30px;
    padding: 3px 10px;
    background: #dcfce7;
    color: #00b42a;
}
.tabletag1 {
    background: #fff2e8;
    color: #ff7d00;
}
.tabletag2 {
    background: #ffece8;
    color: #f53f3f;
}
.tabletag3 {
    background: #f3f4f6;
    color: #000;
}
.warntag {
    color: #4d4204 !important;
    background: #f7f2be !important;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}
.tablebox {
    .bot {
        color: #333;
        font-size: 14px;
        margin-top: 20px;
    }
}
.bluebtn {
    background: #165dff;
    color: #fff;
    font-size: 16px;
    padding: 0px 10px;
    height: 40px;
    border-radius: 5px;
    img {
        margin-right: 5px;
    }
}
.mb10 {
    margin-bottom: 10px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #165dff;
}
.img15 {
    width: 15px;
    height: 15px;
}
.img20 {
    width: 20px;
    height: 20px;
}
.select5 {
    width: 80px;
}
.ruleForm {
    padding: 10px 20px 20px 20px;
    .fr {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
}
/deep/.drawer {
    .el-drawer__header {
        font-size: 20px;
        color: #000;
        border-bottom: 1px solid #ebeef5;
        margin: 0 !important;
        padding-bottom: 20px;
    }
}
.detail {
    width: 900px;
    margin: 0 auto;
    height: auto;
    margin-top: -20px;
    .tags {
        padding: 5px 10px;
        background: #fafafa;
        border-radius: 10px;
        margin-top: 20px;
        .tags_title {
            display: flex;
            justify-content: space-between;
            .el-button--primary {
                background: var(--themeColor);
                border-color: var(--themeColor);
            }
        }
    }
    p {
        width: 100%;
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 14px;
        font-weight: 400;
    }
    .list {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item1 {
            width: 50%;
            font-size: 12px;
            height: 30px;
            span:first-child {
                display: inline-block;
                width: 100px;
            }
        }
    }
    .imglist {
        width: 850px;
        margin: 20px auto;
        height: auto;
        ul {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 23%;
                margin-right: 2%;
                height: 200px;
                margin-bottom: 20px;
                list-style: none;
                div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    img {
                        display: block;
                        width: 100%;
                        height: 150px;
                    }
                    span {
                        display: block;
                        width: 100%;
                        height: 40px;
                    }
                }
            }
        }
    }
}
</style>
